Está viendo un tema de ayuda de Laserfiche Cloud. Si no está utilizando Laserfiche Cloud, consulte la Guía del usuario de Laserfiche o la Guía de administración de Laserfiche .
En esta sección se presenta la sintaxis básica de JavaScript. Para sacar el máximo provecho de él, ya debe saber lo que es un elemento HTML.
A diferencia de los selectores CSS, los selectores de JavaScript pueden apuntar no solo a un elemento, sino también a los valores de elementos como cuadros de entrada, casillas de verificación y botones de opción. Mediante selectores de JavaScript en los valores de los elementos, puede agregar, modificar o eliminar elementos del formulario en función de los valores que los usuarios escriban en otros elementos. Los selectores de JavaScript también pueden detectar eventos como campos que se cambian o botones en los que se hace clic. Al escribir funciones que se desencadenan en estos eventos, puede hacer que el formulario responda dinámicamente a las acciones de los usuarios.
Al igual que los selectores CSS, los selectores de JavaScript tienen como destino los elementos HTML. Como tal, debe utilizar los mismos métodos que los descritos en Personalización de un formulario con CSS y Selectores Javascript y CSS para encontrar los elementos y atributos de interés.
Laserfiche Forms utiliza la popular biblioteca de JavaScript jQuery. En jQuery, un selector comienza con un $ signo, seguido de paréntesis y comillas (single o double) que contienen el identificador seleccionado. Por ejemplo, para dirigir el primer campo de un formulario, utilice el selector $('#q1'). También puede dirigirse a identificadores que cumplan ciertos criterios, como estar seleccionado (para casillas de verificación) o comenzar con una cadena determinada. Al igual que con los selectores CSS, los identificadores van precedidos de un #, mientras que las clases van precedidas por un punto.
Para orientar elementos basados en atributos distintos de ids y clases, utilice el formato [attribute="value"]. Por ejemplo, para seleccionar todos los elementos que tienen el texto de tipo, utilice $('[type="text"]').
A veces es posible que necesite combinar varios selectores para apuntar a los elementos que desea. Los selectores compuestos le permiten hacerlo de diferentes maneras.
Para seleccionar elementos que satisfagan cualquiera de una lista decondiciones: utilice una coma para separar cada selector de componentes. Los destinos previstos solo tienen que satisfacer al menos uno de los selectores de la lista separada por comas. E.g. $("div, span").css("border", "3px solid red") da a todos los elementos div y a todos los elementos span un borde de 3 píxeles de ancho y rojo.
Para seleccionar elementos que cumplan todas las condiciones de una lista de condiciones: Encadenar los selectores de componentes sin espacio. A veces, esto puede requerir el uso de corchetes en los selectores de componentes. Por ejemplo, $('[type="text"][name="Field3"]') selecciona todos los elementos que tienen su atributo type establecido text en y su atributo name establecido en Field3. $('input.TwoPerLine') selecciona todos los elementos de entrada que tienen la clase TwoPerLinepersonalizada. $('input[type="text"]') selecciona todos los elementos de entrada que tienen el tipo text.
Para seleccionar descendientes de un elemento: Separar el antepasado y el descendiente con un espacio. Por ejemplo, $('#q1 input') selecciona todos los elementos de entrada dentro del elemento con id q1.
Para seleccionar los elementos secundarios inmediatos de un elemento: separe el elemento primario y el elemento secundario con un >archivo . Por ejemplo, $('.cf-collection > div') selecciona todos los elementos div que son elementos secundarios inmediatos de un elemento con clase cf-collection. Esta sintaxis no selecciona ningún antecesor del elemento primario que no sea sus hijos inmediatos. Por ejemplo, en un fragmento de código HTML que tiene la <ul><li><input ... ></li></ul>estructura, un selector como ul > input no seleccionaría el elemento de entrada incrustado, porque el elemento de entrada no es un elemento secundario inmediato de ul . li > input, sin embargo, seleccionaría ese elemento de entrada.
| Sintaxis | Uso | Ejemplo |
|---|---|---|
| $('#q1') | Dirige el campo con id q1. Es útil como selector para eventos. | $('#q1').change(función () |
| $('#q1 entrada') | Dirige el cuadro de entrada del campo con id q1. Para obtener el valor en el cuadro de entrada, añada .val(). | $('#q1 input').val() |
| $('#Field4(2) entrada') | Dirige un cuadro de entrada en una tabla. El atributo ID para los cuadros de entrada en filas de tabla tiene el formato FieldFieldNumber(RowNumber ). Para averiguar por qué se identifica FieldNumber una columna, utilice las herramientas de inspección HTML de sunavegador. Los números de fila comienzan en 1 para la primera fila. Este selector en particular tiene como destino el cuadro de entrada que se encuentra en la segunda fila de una columna con id Field4. | $('#Field4(2) entrada').val() |
| $('[id-"Field4"]') | Se dirige a los cuadros de entrada de campo que comienzan con Field4. Es útil para segmentar todos los cuadros de entrada de una columna de tabla. El atributo id para los cuadros de entrada de las filas de tabla tiene el formato FieldFieldNumber(RowNumber ). El uso de esta sintaxis de selector es una forma de dirigirse a todos los cuadros de entrada de una columna determinada. | $('[id-Field4]').val() |
| $("[id$'(2)']") | Dirige los cuadros de entrada de las segundas filas de tablas, seleccionando todos los elementos con identificadores que terminan con (2). | $("[id$'(2)']").val() |
| $("input[id''Field14']:checked") | Dirige los botones de opción o las casillas de verificación seleccionados que tienen un identificador que comienza por Field14. | $('input[id-"Field14"]:checked').val() |
| $('#Field6_other_value') | Dirige el texto en el cuadro de entrada para una opción "Otros" en el botón de opción o campo de casilla de verificación con id q6. | $('#Field6_other_value').val() |
| $('select[id'"Field14"]') | Dirige el cuadro de entrada de los campos desplegables cuyo id comienza con Field14. Resulta útil si desea el valor seleccionado de un campo desplegable. | $('select[id'"Field14"]').val() |
| $('.cf-collection > div') | Para colecciones con conjuntos de campos repetidos, tiene como destino el contenedor div que ajusta cada conjunto de campos. Esto funciona porque los divs son elementos secundarios inmediatos del elemento con la clase .cf-collection. | $('.cf-collection > div').each(function () á //function definition } |
| .cf-table-block tbody tr | Dirige las filas de una tabla. | Consulte Iteración sobre filas de tabla |
Nota:Para obtener más información sobre los selectores de jQuery, consulte la documentación en línea de jQuery.
Selectores eligen elementos en una página; los métodos procesan las características de esos elementos. Un selector como $('#q1 input'), tomado por sí mismo, no elige el valor de la entrada seleccionada: debe anexar un método al selector para obtener valores. Por ejemplo, $('#q4 input').val() indica que se está extrayendo el valor de la entrada para el campo con id q4.
| Nombre | Sintaxis | Uso | Ejemplo |
|---|---|---|---|
| Valor | .val() para obtener valor; .val(newValue) para establecer el valor. | Se utiliza para obtener el valor de un elemento. Al pasar un valor a este método (incluyéndolo entre paréntesis), este método también puede establecer el valor de un elemento. Cuando utilice este método, asegúrese de que el selector está apuntando a elementos que tienen valores (por ejemplo, cuadros de entrada). |
Obtener el valor existente del elemento: Establezca el elemento seleccionado para que tenga el valor Nuevovalor: |
| Cada | .each(selector) | Se utiliza para recorrer en iteración elementos dentro de un objeto jQuery. Más útil cuando se desea llevar a cabo una operación sobre varios elementos que cumplen una determinada condición. Por ejemplo, puede recorrer en iteración todas las filas de una tabla o todos los div s de unacolección. | Consulte Personalización de tablas para ver algunos ejemplos. |
| Encontrar | .find(selector) | Busca a través de los descendientes de los elementos que coinciden con el selector y devuelve un nuevo jQuery objeto que consta de los elementos coincidentes. |
Para encontrar todos los elementos li que son descendientes de elementos ul, donde estos últimos están dentro del elemento con id q5: $('#q5').find('ul li') |
| Más cercano | .closest(selector) | Busca los antepasados más cercanos de los elementos que coinciden con el selector. Esto puede ser útil cuando desea dirigirse al contenedor de un cuadro de entrada mediante selectores en los atributos del cuadro de entrada. | Para encontrar los elementos div más cercanos que contienen cuadros de texto de entrada: $('input[type'"text"]').closest('div') |
| Longitud | .length() | Devuelve el número de elementos del objeto jQuery al que se aplica. Resulta útil para contar el número de filas de una tabla de longitud variable o el número de conjuntos de una colección repetible. | $('#q20 .rpx').length() devuelve el número de elementos descendientes con la clase rpx en el elemento con id q20. Esto cuenta efectivamente el número de conjuntos repetidos de campos en una colección. |
| Reemplazar | .replace() | Se utiliza para reemplazar partes de un valor. Este método utiliza la sintaxis de expresión regular. |
Para eliminar todas las comas del valor (sustituyéndolas por nada): $('#Field4').val().replace(/,/,g,''); |
Las funciones toman una entrada y producen una salida. Por ejemplo, es posible que desee generar una decisión sí/no sobre si se debe mostrar una parte determinada de un formulario, en función de los valores que el usuario ha especificado en algunos campos. Puede escribir una función para hacer esto. Las siguientes funciones están integradas en JavaScript y son particularmente útiles para convertir una forma de datos en otra.
| Nombre | Sintaxis | Uso | Ejemplo |
|---|---|---|---|
| Número | Número() | Convierte un valor (normalmente una cadena) en un número. Esto es útil si está trabajando con números que se han introducido en campos que también aceptan caracteres (por ejemplo, campos de una sola línea). |
Convierte el valor del campo en un número, eliminando comas. |
| Parsefloat | parseFloat() | Convierte un valor (normalmente una cadena) en un número de punto flotante (un número con un punto decimal). Esto es útil si está trabajando con valores monetarios que se han introducido en campos que también aceptan caracteres (por ejemplo, Línea única). |
Convierte el valor del campo en un número de punto flotante. |
A diferencia de CSS, JavaScript permite que la página web responda a eventos en la página. Puede especificar que los cambios se realicen en función de lo que se hace clic, se centra en, se cambia, se carga, etc. Por ejemplo, los cambios que deben producirse una vez que las cargas de página normalmente se encapsulan en una $(document).ready función. La mayoría de los ejemplos que proporcionamos en estas páginas se incluyen en una función de este tipo, ya que normalmente no necesitamos personalizaciones que tienen lugar antes de que una página se cargue por completo.
Los eventos deben adjuntarse a un elemento mediante un selector. Esto especifica qué parte de la página se debe cargar, se hace clic en, etc. para desencadenar los procesos especificados en la función. Si encuentra que su JavaScript no se está ejecutando, puede ser que el evento al que está asociado no haya ocurrido o que no esté asociado a un evento.
| Nombre | Sintaxis | Uso | Ejemplo |
|---|---|---|---|
| Listo | $('selector').ready( función () | Indica al explorador que ejecute el código dentro de la función cuando se haya cargado el elemento especificado en el selector. | Ejecute el código adjunto cuando la página se haya cargado: $(document).ready(function () á //code va aquí? |
| Haga clic | $('selector').click( función () | Indica al explorador que ejecute el código dentro de la función cuando se hace clic en el elemento. Por ejemplo, es posible que desee mostrar cierto texto cuando el usuario hace clic en un botón. |
Ejecute el código adjunto cuando se haga clic en un elemento de entrada dentro del elemento con id q4: $('#q4 input').click(función () |
| Desenfoque | $('selector').blur( función () | Indica al explorador que ejecute el código dentro de la función cuando el elemento pierde el foco (es decir, cuando el usuario hace clic fuera del elemento). Por ejemplo, es posible que desee mostrar un mensaje de advertencia si el usuario escribe un valor no válido e intenta pasar a otro campo. |
Ejecute el código adjunto cuando el usuario haga clic fuera de un elemento de entrada dentro del elemento con id q4 :$('#q4 input').blur(función () |
| centro de atención | $('selector').focus( función () | Indica al explorador que ejecute el código dentro de la función cuando el elemento gana el foco (es decir, cuando el usuario pasa el ratón sobre el elemento). Por ejemplo, es posible que desee mostrar ciertas sugerencias cuando el usuario pasa el cursor sobre un cuadro de entrada. |
Ejecute el código adjunto cuando un elemento de entrada dentro del elemento con id q4 se centra en: $('#q4 input').focus(función () |
| cambio | $('selector').change( función () | Indica al explorador que ejecute el código dentro de la función cuando cambie el elemento. Este evento es útil si desea ejecutar una función cuando cambia el valor de un campo. Por ejemplo, es posible que desee que se vuelva a calcular el valor de otro campo cuando el usuario cambie el valor de una de las entradas que se utiliza en el cálculo. |
Ejecute el código adjunto cuando se cambie el valor de un elemento de entrada dentro del elemento con id q4: $('#q4 input').val().change(function () ? |